<template>
	<page-container>
		<a-card>
      <div class="flex justify-between">
        <div class="flex">
          <a-button type="primary" @click="$refs.form.add()" v-access="['Role:save']">
            <template #logo>
              <PlusOutlined />
            </template>
            新增
          </a-button>
        </div>
        <a-form layout="inline" :model="searchData" @finish="fetch">
          <a-form-item>
            <a-input v-model:value="searchData.name" placeholder="角色名称">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
		<a-card class="mt-4">
      <a-table rowKey="id" :columns="columns" :pagination="pagination" :loading="loading" :data-source="items" @change="tableChange">
        <template #bodyCell="{ text, record, column }">
          <a-space wrap v-if="column.dataIndex === 'operation'">
            <a-button class="text-xs" type="primary" size="small" @click="$refs.form.edit(record)" v-access="['Role:update']">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm="del(record.id)">
              <a-button class="text-xs" danger size="small" v-access="['Perm:del']">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
		<role-edit ref="form" @change="updated" />
	</page-container>
</template>
<script lang="ts">
import {page, list} from "@/mixins"
import RoleEdit from "./RoleEdit.vue"

export default {
	mixins: [page, list],
	components: {RoleEdit},
	data() {
		return {
			loadPath: 'role',
			columns: [
				{
					title: '角色名称',
					dataIndex: 'name',
				},
				{
					title: '状态',
					dataIndex: 'status',
					customRender: ({text}) => ['','正常','关闭'][text] ?? '---'
				},
				{
					title: '权限',
					dataIndex: 'perms',
				},
				{
					width: 140,
					title: '操作',
					align: 'center',
					dataIndex: 'operation',
				},
			],
			formData: {
				id: undefined,
				name: '',
				perms: [],
				type: 0
			},
			searchData: {
				name: ''
			}
		}
	},
	mounted () {
		this.fetch({...this.searchData, page: this.pagination.current})		
	}
}
</script>